<template>
    <el-button type="primary" @click="dialogAddQuestion = true">添加试题</el-button>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="i in question_type" :label="i.name" :name="i.name"></el-tab-pane>
    </el-tabs>
    <el-table v-loading="tableLoading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="题干" width="300" />
        <!-- <el-table-column v-if="activeName == '单选题' || activeName == '多选题'" prop="options" label="选项" width="300" /> -->
        <el-table-column label="选项" width="280" v-if="activeName == '单选题' || activeName == '多选题'">
            <template #default="scope">
                <el-tag v-for="(key, values) in JSON.parse(scope.row.options)">
                    {{ values }}: {{ key }}
                </el-tag>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="answer" label="答案" width="180" /> -->
        <el-table-column label="答案" width="180">
            <template #default="scope">
                <el-tag v-for="i in JSON.parse(scope.row.answer)" v-if="activeName == '单选题' || activeName == '多选题'">
                    {{ i }}
                </el-tag>
                <el-text v-if="activeName == '填空题'">
                    {{ scope.row.answer }}
                </el-text>
                <el-text v-if="activeName == '简答题'" line-clamp="2">
                    {{ scope.row.answer }}
                </el-text>
                <el-button v-if="activeName == '简答题'" key="查看详情" type="primary" text
                    @click="show_answer(scope.row.answer)">查看详情</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="180" />
        <el-table-column prop="score" label="分值" width="80" />
        <el-table-column label="answer" width="180">
            <template #default="scope">
                <el-button bg text type="primary" @click="edit_question(scope.row.id)">编辑</el-button>
                <el-popconfirm title="确认删除?" @confirm="delete_question(scope.row.id)">
                    <template #reference>
                        <el-button bg type="warning" text>删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogAnswer_info" title="答案详情" width="500">
        {{ answer_info }}
    </el-dialog>
    <el-dialog v-model="dialogAddQuestion" title="添加试题" width="500">
        <el-form :model="addForm" label-position="top">
            <el-form-item label="试题类型">
                <el-select v-model="addForm.question_type" placeholder="选择试题类型" @change="change_option"
                    style="width: 400px">
                    <el-option v-for="i in question_type" :label="i.name" :value="i.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="题干">
                <el-input v-model="addForm.title" style="width: 400px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="输入题干" />
            </el-form-item>
            <el-form-item v-if="addForm.question_type == 1 || addForm.question_type == 2" label="选项">
                <el-row>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>A：</span><el-input v-model="addForm.options.A"></el-input></div>
                    </el-col>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>B：</span><el-input v-model="addForm.options.B"></el-input></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>C：</span><el-input v-model="addForm.options.C"></el-input></div>
                    </el-col>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>D：</span><el-input v-model="addForm.options.D"></el-input></div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;" v-if="addForm.question_type == 1">
                    <span>正确答案</span>
                    <el-radio-group v-model="addForm.answer" class="ml-4">
                        <el-radio-button :label="`A:${addForm.options.A}`" value="A" />
                        <el-radio-button :label="`B:${addForm.options.B}`" value="B" />
                        <el-radio-button :label="`C:${addForm.options.C}`" value="C" />
                        <el-radio-button :label="`D:${addForm.options.D}`" value="D" />
                    </el-radio-group>
                </el-row>
                <el-row style="margin-top: 20px;" v-if="addForm.question_type == 2">
                    <span>正确答案</span>
                    <el-checkbox-group v-model="addForm.answers">
                        <el-checkbox-button value="A">
                            A:{{ addForm.options.A }}
                        </el-checkbox-button>
                        <el-checkbox-button value="B">
                            B:{{ addForm.options.B }}
                        </el-checkbox-button>
                        <el-checkbox-button value="C">
                            C:{{ addForm.options.C }}
                        </el-checkbox-button>
                        <el-checkbox-button value="D">
                            D:{{ addForm.options.D }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-row>
            </el-form-item>
            <el-form-item v-if="addForm.question_type == 3 || addForm.question_type == 4" label="正确答案">
                <el-input v-model="addForm.answer" style="width: 400px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="输入正确答案" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogAddQuestion = false">取消</el-button>
                <el-button type="primary" @click="submitQuestion">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogEditQuestion" title="编辑题目" width="500">
        <el-form :model="EditForm">
            <el-form-item label="试题类型">
                <el-select v-model="EditForm.question_type" placeholder="选择试题类型" @change="change_option"
                    style="width: 400px">
                    <el-option v-for="i in question_type" :label="i.name" :value="i.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="题干">
                <el-input v-model="EditForm.title" style="width: 400px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="输入题干" />
            </el-form-item>
            <el-form-item v-if="EditForm.question_type == 1 || EditForm.question_type == 2" label="选项">
                <el-row>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>A：</span><el-input v-model="EditForm.options.A"></el-input></div>
                    </el-col>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>B：</span><el-input v-model="EditForm.options.B"></el-input></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>C：</span><el-input v-model="EditForm.options.C"></el-input></div>
                    </el-col>
                    <el-col :span="9" style="margin-left:20px">
                        <div><span>D：</span><el-input v-model="EditForm.options.D"></el-input></div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;" v-if="EditForm.question_type == 1">
                    <span>正确答案</span>
                    <el-radio-group v-model="EditForm.answer" class="ml-4">
                        <el-radio-button :label="`A:${EditForm.options.A}`" value="A" />
                        <el-radio-button :label="`B:${EditForm.options.B}`" value="B" />
                        <el-radio-button :label="`C:${EditForm.options.C}`" value="C" />
                        <el-radio-button :label="`D:${EditForm.options.D}`" value="D" />
                    </el-radio-group>
                </el-row>
                <el-row style="margin-top: 20px;" v-if="EditForm.question_type == 2">
                    <span>正确答案</span>
                    <el-checkbox-group v-model="EditForm.answers">
                        <el-checkbox-button value="A">
                            A:{{ EditForm.options.A }}
                        </el-checkbox-button>
                        <el-checkbox-button value="B">
                            B:{{ EditForm.options.B }}
                        </el-checkbox-button>
                        <el-checkbox-button value="C">
                            C:{{ EditForm.options.C }}
                        </el-checkbox-button>
                        <el-checkbox-button value="D">
                            D:{{ EditForm.options.D }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-row>
            </el-form-item>
            <el-form-item v-if="EditForm.question_type == 3 || EditForm.question_type == 4" label="正确答案">
                <el-input v-model="EditForm.answer" style="width: 400px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="输入正确答案" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogEditQuestion = false">取消</el-button>
                <el-button type="primary" @click="submitChange">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus";
import axios from "../../utils/http.js";
import clearValue from '../../utils/clear_object.js'
let dialogAddQuestion = ref(false)
let dialogAnswer_info = ref(false)
let dialogEditQuestion = ref(false)
let answer_info = ref('')
let question_type = ref([])
let activeName = ref('单选题')
let tableLoading = ref(true)
let tableData = ref([])
let addForm = ref({
    title: '',
    options: {
        "A": "",
        "B": "",
        "C": "",
        "D": ""
    },
    answer: '',
    answers: [],
    question_type: 1
})
let EditForm = ref({
    title: '',
    options: {
        "A": "",
        "B": "",
        "C": "",
        "D": ""
    },
    answer: '',
    answers: [],
    question_type: 1
})
let e_id = ref('')
function edit_question(id) {
    dialogEditQuestion.value = true
    e_id.value = id
    axios({
        url: 'examination/edit_questions/',
        method: 'GET',
        params: {
            question_id: id
        }
    }).then(res => {
        if (res.data.code == 201) {
            EditForm.value = res.data.data
            EditForm.value.options = JSON.parse(res.data.data.options)
            if (EditForm.value.question_type == 1) {
                EditForm.value.answer = JSON.parse(res.data.data.answer)[0]
            } else if (EditForm.value.question_type == 2) {
                EditForm.value.answers = JSON.parse(res.data.data.answer)
            }
        }
        console.log(EditForm.value);
    })
}
function delete_question(id) {
    axios({
        url: 'examination/edit_questions/',
        method: 'delete',
        params: {
            question_id: id
        }
    }).then(res => {
        if (res.data.code == 201) {
            ElMessage.success(res.data.msg)
            get_all_questions(activeName.value)
        } else {
            ElMessage.warning(res.data.msg)
        }
        get_all_questions(activeName.value)
    })
}
function submitChange() {
    axios({
        url: 'examination/edit_questions/',
        method: 'put',
        data: EditForm.value,
        params: {
            question_id: e_id.value
        }
    }).then(res => {
        if (res.data.code == 201) {
            ElMessage.success(res.data.msg)
            get_all_questions(activeName.value)
        } else {
            ElMessage.warning(res.data.msg)
        }
        dialogEditQuestion.value = false
        get_all_questions(activeName.value)
    })
}
function show_answer(info) {
    dialogAnswer_info.value = true
    answer_info.value = info
}
const handleClick = (tab, event) => {
    tableData.value = []
    get_all_questions(tab.props.name)
    tableLoading.value = true
}

function get_all_questions(name) {
    axios({
        url: 'examination/get_different_questions/',
        method: 'GET',
        params: {
            question_type: name
        }
    }).then(res => {
        if (res.data.code == 201) {
            tableData.value = res.data.data
        } else {
            ElMessage.warning(res.data.msg)
        }
        tableLoading.value = false
    })
}
function change_option() {
    if (addForm.value.question_type == 3 || addForm.value.question_type == 4) {
        addForm.value.answer = ''
        addForm.value.answers = []
    }
}
function get_type_list() {
    axios({
        url: 'examination/get_question_type/',
        method: 'GET'
    }).then(res => {
        question_type.value = res.data.questions_type
    })
}
function submitQuestion() {
    console.log(addForm.value);
    axios({
        url: 'examination/get_question_type/',
        method: 'POST',
        data: addForm.value
    }).then(res => {
        if (res.data.code == 201) {
            ElMessage.success(res.data.msg)
            addForm.value = {
                title: '',
                options: {
                    "A": "",
                    "B": "",
                    "C": "",
                    "D": ""
                },
                answer: '',
                answers: [],
                question_type: 1
            }
        } else {
            ElMessage.warning(res.data.msg)
        }
        get_all_questions(activeName.value)
    })

    dialogAddQuestion.value = false
}
onMounted(() => {
    get_type_list()
    get_all_questions(activeName.value)
})
</script>

<style scoped></style>